<template>
  <div class="specManage">
    <div class="specGroup">
      <div class="specItem" v-for="(item, index) in receptData.specList" :key="index">
        <div class="top jscenter">
          <p class="name">{{ item.name }}</p>
          <p class="deleteBtn ccenter" @click="deleteSpec(item)">删除</p>
          <p class="editBtn ccenter" @click="editSpec(item)">修改</p>
        </div>
        <div class="types acenter">
          <div class="typeItem" v-for="(element, location) in item.specs" :key="location">
            <span v-if="location !== 0">/</span>{{ element.spec_value }}
          </div>
        </div>
      </div>
    </div>

    <fullFoot
      :title="'+添加新规格'"
      @click-btn="handleRouteJump('/spec/addNewSpecCard')"
    ></fullFoot>

    <del-dialog ref="delDialogRef" @confirm="handleDelDialogConfirm"></del-dialog>
  </div>
</template>

<script setup lang="ts">
  import _ from 'lodash'
  import fullFoot from '../home/groupLink/components/fullFoot.vue'
  import DelDialog from '@/components/Dialog/index.vue'
  import { useRouter } from 'vue-router'
  import { Toast } from '@nutui/nutui'
  import { getSpecListApi, deleteSpecApi } from '@/api/addstart/index'
  import { nanoid } from 'nanoid'
  import { ref } from 'vue'

  //--------------------------------------------hook--------------------------------------------
  const router = useRouter()

  //--------------------------------------------data--------------------------------------------
  const delDialogRef = ref<InstanceType<typeof DelDialog>>()
  const currentItem = ref<any>(null)
  const receptData = ref<any>({
    specList: []
  })

  //--------------------------------------------普通函数--------------------------------------------
  // 跳转：添加新规格
  const handleRouteJump = (path: string, query: any = {}) => {
    router.push({
      path,
      query
    })
  }
  // 删除：删除该规格
  const deleteSpec = (item: any) => {
    if (isDefaultSpecs(item.specs)) {
      Toast.fail('默认规格不能删除')
    } else {
      currentItem.value = item
      delDialogRef.value?.openDialog()
    }
  }
  // 删除：弹窗确认删除
  const handleDelDialogConfirm = () => {
    if (currentItem.value) {
      deleteSpecRequest()
    }
  }
  // 修改：编辑该规格
  const editSpec = (item: any) => {
    if (isDefaultSpecs(item.specs, 1)) {
      Toast.fail('默认规格不能修改')
    } else {
      window.localStorage.setItem('specItem', JSON.stringify(item))
      handleRouteJump('/spec/addNewSpecCard', { specId: 1, specPreName: item.name })
    }
  }

  //--------------------------------------------工具方法--------------------------------------------
  // 用于判断该规格是否为默认（默认则不允许删除或修改）
  function isDefaultSpecs(specs: any[], defaultVal = 1) {
    let defaultFlag = true
    for (const item of specs) {
      if (item.spec_type != defaultVal) {
        defaultFlag = false
        break
      }
    }
    return defaultFlag
  }

  //--------------------------------------------网络请求--------------------------------------------
  // 获取规格数据列表
  async function getSpecList() {
    const res = await getSpecListApi()
    const { system_specs = [], custom_specs = [] } = res.result

    const s_specs = _.cloneDeep(system_specs)
    const c_specs = _.cloneDeep(custom_specs)

    s_specs.map((item: any) => {
      item.isDefault = true
    })

    const payload = [...s_specs, ...c_specs]
    payload.map((item: any) => {
      item.nId = nanoid()

      item.specs.map((it: any) => {
        it.nId = nanoid()
      })
    })

    receptData.value.specList = payload
  }
  // 删除该规格
  async function deleteSpecRequest() {
    const res = await deleteSpecApi({ spec_name: currentItem.value.name })
    if (res.code == 0) {
      Toast.text('删除成功')
      getSpecList()
    }
  }

  //--------------------------------------------生命周期函数--------------------------------------------
  // 初始化函数
  function setupInit() {
    getSpecList()
  }
  setupInit()
</script>

<style lang="scss" scoped>
  .specManage {
    margin-top: 20px;
    background: #ffffff;
    .specGroup {
      .specItem {
        padding: 28px 30px 34px 30px;
        .top {
          .name {
            color: #000000;
            font-size: 32px;
          }
          .deleteBtn,
          .editBtn {
            width: 73px;
            height: 40px;
            border-radius: 6px;
            border: 1px solid #ccd6cb;
            color: #999999;
            font-size: 24px;
          }
          .deleteBtn {
            margin-left: auto;
            margin-right: 20px;
          }
        }
        .types {
          margin-top: 12px;
          max-width: 467px;
          flex-wrap: wrap;
          .typeItem {
            color: #666666;
            line-height: 34px;
            font-size: 26px;
          }
        }
      }
    }
  }
</style>
